<!--  -->
<template>
  <div>
  
    map {{ selectLngLat }}
    <input id="input" />
    <div class="panel" id="panelDriving"></div>
    <div class="panel" id="panel"></div>
    <div id="mymap" style="width: 100; height: 400px"></div>

    <el-button type="primary" @click="submit">确定</el-button>

    <el-button type="primary" @click="showTip(1)">显示第二个</el-button>
    
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted,defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const emits=defineEmits(["sendlnglat"]);

const showTip=(index:number)=>{

    document.getElementById("tip"+index)!.style.display="block";

    // document.getElementById("tip")?.style.display="block";

    // document.getElementById("tip"+index)?.style.display="block";
}

const submit=()=>{
    emits("sendlnglat",selectLngLat.value);
}

window._AMapSecurityConfig = {
  securityJsCode: "2cbe1a720ff18fae308d96736f2c9f5c", // 应用生成的秘钥
};

const dialogShow=ref(true);

const state = reactive<any>({
  map: null,
  placesearch: null,
  autocomplete: null,
});

const selectLngLat=ref<any>([]);

//初始化地图
const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "71e6ada2ae601b96445a1c4bb40989a4",
    version: "2.0",
    plugins: [
      "AMap.ToolBar",
      "AMap.Scale",
      "AMap.Geolocation",
      "AMap.HawkEye",
      "AMap.ControlBar",
      "AMap.Marker",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Driving",
      "AMap.Polygon"
    ],
  });

  //地图挂载到页面

  state.map = new AMap.Map("mymap", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 12, // 初始化地图级别
    center: [121.045332, 31.19884], // 初始化地图中心点位置
  });

  //       state.map.on("click", function (ev:any) {

  //         console.log(ev);

  // //   var lnglat = ev.lnglat;

  // });

  //添加缩放工具条
  const toolBar = new AMap.ToolBar({
    position: {
      top: "10px",
      right: "10px",
    },
  });
  state.map.addControl(toolBar);

  //添加比例尺
  const scale = new AMap.Scale();

  state.map.addControl(scale);

  //添加定位

  const geolocation = new AMap.Geolocation({
    position: {
      left: "10px",
      top: "10px",
    },
  });
  state.map.addControl(geolocation);

  //添加鹰眼

  const hawkEye = new AMap.HawkEye();
  state.map.addControl(hawkEye);

  //添加方向盘

  const controlBar = new AMap.ControlBar();
  state.map.addControl(controlBar);

  //添加点标记

  const position = new AMap.LngLat(116.397029, 39.917839); // Marker经纬度
  const content = `<div><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"></div>`;
  const marker = new AMap.Marker({
    position,
    content: content,
    offset: new AMap.Pixel(-24, -34),
  });
  state.map.add(marker);

  //地图搜索

  state.autocomplete= new AMap.AutoComplete({
    input: "input",
    city:"北京"
  });



 state.placesearch= new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex:1,
    city:"北京",
    citylimit: true, 
    map:state.map,
    panel: "panel",
    autoFitView: true
  });



  state.autocomplete.on("select",(e:any)=>{

 
state.placesearch.search(e.poi.name);

})

state.placesearch.on("markerClick",(e:any)=>{

    console.log(999,e);

    selectLngLat.value=[e.data.location.lng, e.data.location.lat];

    const position = new AMap.LngLat(e.data.location.lng, e.data.location.lat); // Marker经纬度
  const marker = new AMap.Marker({
    position: position,
    zIndex:2147483648,
    offset: new AMap.Pixel(-0, -0), // 以 icon 的 [center bottom] 为原点
  });
 
  state.map.add(marker); //将Marker添加到地图上

    

})

//路线规划
//  const driving= new AMap.Driving({
//     map: state.map,
//     panel:"panelDriving"
//   })
//   driving.search([
//     {keyword: '沙河地铁',city:'北京'},
//     {keyword: '天安门',city:'北京'},
//   ],(status:any, result:any)=>{

//     console.log(status,result);
    


//   })

  //多边形

  var shanghai = [
    [
        [
            [121.7789, 31.3102],
            [121.7279, 31.3548],
            [121.5723, 31.4361],
            [121.5093, 31.4898],
            [121.5624, 31.4864],
            [121.5856, 31.4547],
            [121.7694, 31.3907],
            [121.796, 31.3456],
            [121.7789, 31.3102],
        ],
    ],
    [
        [
            [121.627, 31.445],
            [121.5942, 31.4586],
            [121.5758, 31.4782],
            [121.6137, 31.4713],
            [121.635, 31.453],
            [121.627, 31.445],
        ],
    ],
    [
        [
            [121.8018, 31.357],
            [121.7939, 31.3805],
            [121.8759, 31.3642],
            [121.8882, 31.3227],
            [121.8725, 31.2968],
            [121.8406, 31.2954],
            [121.8038, 31.3284],
            [121.8018, 31.357],
        ],
    ],
    [
        [
            [121.9752, 31.617],
            [121.9917, 31.4768],
            [121.918, 31.4347],
            [121.8454, 31.4319],
            [121.6088, 31.5069],
            [121.4342, 31.5903],
            [121.3955, 31.5854],
            [121.3722, 31.5532],
            [121.1453, 31.7539],
            [121.1185, 31.7591],
            [121.2003, 31.8351],
            [121.3104, 31.8725],
            [121.385, 31.8335],
            [121.4315, 31.7693],
            [121.4986, 31.7533],
            [121.5933, 31.7046],
            [121.9752, 31.617],
        ],
    ],
    [
        [
            [121.1571, 31.4114],
            [121.1462, 31.4211],
            [121.1643, 31.4272],
            [121.1643, 31.4311],
            [121.1473, 31.4439],
            [121.2304, 31.4774],
            [121.2352, 31.4931],
            [121.2594, 31.4779],
            [121.3435, 31.5121],
            [121.4054, 31.4872],
            [121.5212, 31.3948],
            [121.5989, 31.3746],
            [121.7225, 31.3035],
            [121.9627, 31.0473],
            [121.9985, 30.9],
            [121.994, 30.8631],
            [121.9547, 30.8258],
            [121.9697, 30.7892],
            [121.9437, 30.7771],
            [121.9045, 30.8142],
            [121.6484, 30.8162],
            [121.5172, 30.7754],
            [121.3619, 30.6795],
            [121.2747, 30.6774],
            [121.2715, 30.7327],
            [121.2355, 30.7523],
            [121.218, 30.785],
            [121.1747, 30.772],
            [121.1178, 30.7848],
            [121.1376, 30.8262],
            [121.1177, 30.8353],
            [121.1217, 30.85],
            [121.067, 30.8488],
            [121.0379, 30.8139],
            [121.0144, 30.8358],
            [120.9909, 30.8227],
            [121.0219, 30.8752],
            [120.9904, 30.8956],
            [121.0046, 30.9093],
            [120.9904, 31.0138],
            [120.9522, 31.0303],
            [120.9398, 31.0094],
            [120.911, 31.0106],
            [120.8946, 31.0539],
            [120.9021, 31.0857],
            [120.8569, 31.105],
            [120.8813, 31.1347],
            [121.0185, 31.1341],
            [121.0408, 31.1376],
            [121.0454, 31.154],
            [121.0691, 31.1487],
            [121.0625, 31.2675],
            [121.0821, 31.2715],
            [121.0888, 31.2921],
            [121.0988, 31.2763],
            [121.1054, 31.2737],
            [121.1206, 31.287],
            [121.1616, 31.283],
            [121.1438, 31.3097],
            [121.1299, 31.3026],
            [121.1304, 31.3442],
            [121.1068, 31.3645],
            [121.1484, 31.3854],
            [121.1571, 31.4114],
        ],
    ],
    [
        [
            [121.9433, 31.2155],
            [121.9573, 31.2304],
            [122.0086, 31.221],
            [121.9957, 31.1608],
            [121.9596, 31.1593],
            [121.9433, 31.2155],
        ],
    ],
];

// const polygon= new AMap.Polygon(

// {
//   path: shanghai,
//   fillColor: '#ff0000', // 多边形填充颜色
//   strokeOpacity: 1, // 线条透明度
//   fillOpacity: 0.5, //填充透明度
//   strokeColor: '#ffff00', // 线条颜色
//   strokeWeight: 1, //线条宽度
//   strokeStyle: 'dashed', // 线样式
//   strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
// }
// )

// polygon.on('click', (e:any) => { // 鼠标移入更改样式
//     console.log(e);
    
//   alert(11111);
//  })

// polygon.on('mouseover', () => { // 鼠标移入更改样式
//    polygon.setOptions({
//      fillOpacity: 0.7,
//      fillColor: '#7bccc4'
//    })
//  })
// polygon.on('mouseout', () => { // 鼠标移出恢复样式
//   polygon.setOptions({
//     fillOpacity: 0.5,
//     fillColor: '#ff0000'
//   })
// })

// state.map.add(polygon);

//添加标记

let markers=[[121.499718,31.239703],[121.402673,31.262953]]

markers.forEach((item:any,index:number)=>{

   let  _marker = new AMap.Marker({
    position: new AMap.LngLat(...item),
    content:`<div><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
         <div id="tip${index}" class="box"></div>
        </div>`,
    offset: new AMap.Pixel(-13, -30), // 以 icon 的 [center bottom] 为原点
  });

  state.map.add(_marker); 

})


 





};
onMounted(() => {
  initMap();
});
</script>
<style>
.box{
   border:solid 2px blue;
   width:300px;
   height:100px;
   z-index: 999999;
   display: none
   
}
</style>
<style scoped>
.panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
  z-index: 999;
}

</style>
